<template>
  <div class="hello">
    
    <div class="float" @click="ShowFloat">
      <div class="camera" v-show="isShow">
        <input type="file" accept="image/*">
        <img src="/dist/static/img/Camera.png" alt="">
      </div>
      <div class="picture" v-show="isShow">
        <input type="file" accept="image/*">
        <img src="/dist/static/img/Photo.png" alt="">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      isShow:false,
    }
  },
  methods:{
    ShowFloat:function(){
      this.isShow = !this.isShow;
      this.$store.commit('increment');
      console.log(this.$store.state.invoice);
      console.log(this.$store.state.latitude);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only
<style scoped>
.float{
  height: 4rem;
  width: 4rem;
  position: fixed;
  bottom: 6rem;
  right: 1.5rem;
  border-radius: 50%;
  background-color: #fe4e4c;
  box-shadow: 0px 0px 0px 3px #fff;
}
.camera{
  position: fixed;
  height: 5rem;
  width: 5rem;
  bottom:12rem;
  right: 1.5rem;
  border-radius: 50%;
  box-shadow: 0px 0px 10px 1px rgba(0,0,0,.26);
}
.camera img{
  width: 100%;
  height: 100%;
}
.picture{
  position: fixed;
  height: 5rem;
  width: 5rem;
  right: 8rem;
  bottom:6rem;
  border-radius: 50%;
  box-shadow: 0px 0px 10px 1px rgba(0,0,0,.26);
}
.picture img{
  width: 100%;
  height: 100%;
}
.float input{
  display: none;
}
</style>
 -->